<template>
	<view>
		<!-- #ifndef MP-WEIXIN-->
		<my-navbar leftText="我的优惠券" @leftClick="back"></my-navbar>
		<!-- #endif -->
		<view class="content">
			<view class="copon_box copon flex-btw" v-for="(item,index) in list" :key="index">
				<view class="left flex-center">{{item.coupons.type==1?'普通券':'现金券'}}</view>
				<view class="center flex-btw">
					<view class="center_left">
						<view class="price">￥{{item.coupons.money}}</view>
						<view class="info" @click="alertInfo(item.coupons.describe)">
							<u-icon name="question-circle"></u-icon>
							<text class="info_text">使用说明</text>
						</view>
					</view>
					<view class="center_right">
						<view v-if="item.coupons.type==1" class="rule">满{{item.coupons.order_money_limit}}使用</view>
						<view v-else-if="item.coupons.type==2" class="rule">无门槛</view>
						<view class="limit" v-if="item.coupons.get_limit">每位用户限制{{item.coupons.get_num}}张</view>
						<view class="limit" v-else>不限量</view>
						<view class="time" v-if="item.coupons.expire_type==1">
							{{parseTime(item.coupons.start_time)}}~{{parseTime(item.coupons.end_time)}}
						</view>
						<view class="time" v-else-if="item.coupons.expire_type==2">限{{item.coupons.expire_days}}天内使用
						</view>
					</view>
				</view>
				<view class="right" @click="toClassify">去使用</view>
			</view>
			<view v-if="nodata" class="nodata-box">
				<image class="nodata-pic" src="../../../static/image/nodata.png"></image>
				<view class="nodata-txt">暂无数据</view>
			</view>
		</view>
		<view class="bottom flex-around">
			<view class="flex-center" @click="toAction('coupon_center')">领券中心</view>
			<view class="line"></view>
			<view class="flex-center" @click="toAction('coupon_history')">使用记录</view>
		</view>
		<u-modal v-model="info.show" :content="info.value" title="使用说明" confirm-color="#40AE36"></u-modal>
	</view>
</template>

<script>
	import {
		$https
	} from '@/static/js/request.js';
	export default {
		data() {
			return {
				page: 1,
				list: [],
				info: {
					value: '',
					show: false,
				},
				nodata: false
			};
		},
		onShow() {
			this.getData(1);
		},
		methods: {
			getData(page) {
				var params = {
					size: 20,
					page,
					status: 0,
				}
				$https('GET', 'getMyCouponsList', params, res => {
					if (res.data.errcode == 0) {
						this.page = page;
						if (page == 1) {
							if (res.data.data.list.length == 0) {
								this.nodata = true
							} else {
								this.list = res.data.data.list;
								this.nodata = false
							}
						} else {
							let oldData = this.list;
							this.list = oldData.concat(res.data.data.list);
						}
						this.count = res.data.data.count;
					} else {
						uni.showToast({
							title: res.data.errmsg,
							icon: 'none'
						});
					}
				})
			},
			toAction(type) {
				uni.navigateTo({
					url: `/subpack/user/coupon/${type}`
				})
			},
			alertInfo(info) {
				this.info.value = info;
				this.info.show = true;
			},
			parseTime(time) {
				time = time * 1000;
				var date = new Date(time);
				var year = date.getFullYear(),
					month = date.getMonth() + 1 < 9 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1,
					day = date.getDate() < 9 ? '0' + date.getDate() : date.getDate();
				return `${year}-${month}-${day}`
			},
			back() {
				// #ifdef H5
				window.history.back(-1);
				// #endif 
				// #ifndef H5
				uni.navigateBack();
				// #endif
			},
			toClassify() {
				uni.switchTab({
					url: '/pages/tabar/classify'
				})
			},
		},
		onReachBottom() {
			if (this.list.length < this.count) {
				this.page++;
				this.getData(this.page);
			}
		},
	}
</script>

<style lang="scss">
	.content {
		padding: 44rpx 56rpx 150rpx;

		.copon_box {
			width: 638rpx;
			height: 164rpx;
			background: url(../../../static/image/coupon.png) no-repeat;
			background-size: 100% 100%;
			padding: 0 30rpx;
			margin-bottom: 20rpx;

			.left {
				min-height: 150rpx;
				width: 40rpx;
				word-wrap: wrap;
				font-size: 28rpx;
				line-height: 35rpx;
				border-radius: 4rpx;
				text-align: center;
				padding: 10rpx 0;
				transform: scale(0.8);
			}

			.right {
				width: 40rpx;
				word-wrap: wrap;
				font-size: 22rpx;
				line-height: 26rpx;
				border: 1px solid #fff;
				border-radius: 6rpx;
				text-align: center;
				padding: 10rpx 0;
				margin-left: 40rpx;
			}

			.center {
				flex: 1;

				.center_left {
					text-align: center;
					width: 50%;

					.price {
						font-size: 40rpx;
						font-weight: bold;
					}

					.info {
						color: #A4A4A4;
						font-size: 16rpx;

						.info_text {
							text-decoration: underline;
							margin-left: 4rpx;
						}
					}
				}

				.center_right {
					text-align: center;
					width: 50%;

					.rule {
						font-size: 24rpx;
					}

					.limit {
						font-size: 20rpx;
						// #ifndef MP-WEIXIN
						transform: scale(.8);
						// #endif
					}

					.time {
						font-size: 20rpx;
						border-radius: 16rpx;
						padding: 4rpx;
						// #ifndef MP-WEIXIN
						transform: scale(.7);
						line-height: 22rpx;
						// #endif
						// #ifdef MP-WEIXIN
						transform: scale(0.9);
						// #endif
					}
				}
			}

			&.copon {
				.left {
					background: #F6D32D;
					color: #C6272A;
				}

				.right {
					color: #F6D32D;
					border-color: #F6D32D;
				}

				.center_left {
					.price {
						color: #c6272a;
					}
				}

				.center_right {
					color: #757575;

					.rule {
						color: #191919;
					}

					.time {
						background: #E9ADAE;
					}
				}
			}

			&.copon_used {
				background: url(../../../static/image/coupon_used.png) no-repeat;
				background-size: 100% 100%;

				.left,
				.right {
					background: #CCCCCC;
					color: #787878;
					border-color: #B3B3B3;
				}

				.center_left {
					.price {
						color: #CCCCCC;
					}
				}

				.center_right {
					color: #CCCCCC;

					.rule {
						color: #CCCCCC;
					}

					.time {
						background: #ECECEC;
					}
				}
			}
		}
	}

	.bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 120rpx;
		background: #fff;
		font-size: 32rpx;
		color: #191919;
		padding: 0 20rpx;

		view {
			width: 100%;
			height: 100%;
		}

		.line {
			width: 2rpx;
			height: 54rpx;
			background: #EAEAEA;
		}
	}
	.nodata-box{
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 40rpx;
	}
	.nodata-pic{
		width: 400rpx;
		height: 300rpx;
	}
	.nodata-txt{
		text-align: center;
		font-size: 32rpx;
		color: #666666;
		padding-top: 30rpx;
	}
</style>
